import { Text, View, StyleSheet, TouchableWithoutFeedback } from 'react-native'
import React, { useState, useRef, useEffect } from 'react'
import { connect } from 'react-redux'
import Avatar from "../../components/avatar"
import { pTx } from "../../utils/dimensions"
import { useRealm, useQuery } from '@realm/react'
import { schemaName } from "../../realm"
import { useNavigation } from '@react-navigation/native';
import Realm from "realm"
import IconFont from '@pingtou/rn-vant-icons'

const FriendInfo = (props) => {
    const userInfo = useQuery(schemaName.UserInfo, userInfo => {
        return userInfo.filtered('Current = true');
    })[0];
    const [params] = useState(props.route.params)
    const [friendItem] = useState(props.route.params.Id != userInfo.Id)
    useEffect(() => {
        if (!params.G && friendItem) props.navigation.setOptions({
            headerRight: () => (
                <TouchableWithoutFeedback onPress={() => props.navigation.navigate('friendInfoMaterial', params)}>
                    <View style={[styles.headerRightIcon]}>
                        <IconFont name="ellipsis" size={pTx(26)} />
                    </View>
                </TouchableWithoutFeedback>
            ),
        });
    })
    return (
        <View style={styles.page}>
            <View style={styles.userInfoBox}>
                <Avatar style={styles.avatar} source={{ uri: params.ProfilePhoto }} />
                <View style={styles.userInfo}>
                    <Text style={styles.nickName} selectable>昵称：{params.NickName}</Text>
                    <Text style={styles.nickName} ellipsizeMode={'tail'} numberOfLines={1} selectable>ID：{params.Address}</Text>
                </View>
            </View>
            <View style={styles.foot}>
                {!params.G && friendItem ? <TouchableWithoutFeedback onPress={() => props.navigation.goBack()}>
                    <View style={styles.footRow}>
                        <IconFont name="chat-o" size={pTx(20)} color={'rgba(6, 193, 97, 1)'} />
                        <Text style={styles.sendMessage} >发消息</Text>
                    </View>
                </TouchableWithoutFeedback>
                    : ""
                    // <TouchableWithoutFeedback onPress={() => props.navigation.navigate('applyForFriend', userInfo)}>
                    //     <View style={styles.footRow}>
                    //         <Text style={styles.sendMessage} >添加到通讯录</Text>
                    //     </View>
                    // </TouchableWithoutFeedback>
                }
            </View>
        </View>
    )
}

const mapStateToProps = (state) => state.app

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(FriendInfo)

const styles = StyleSheet.create({
    headerRightIcon: {
        paddingRight: pTx(15),
    },
    page: {
        flex: 1,
        backgroundColor: "#EDEDED"
    },
    userInfoBox: {
        paddingVertical: pTx(15),
        flexDirection: "row",
        alignItems: "center",
        paddingHorizontal: pTx(15),
        backgroundColor: "#ffffff"
    },
    avatar: {
        borderRadius: pTx(8)
    },
    userInfo: {
        flex: 1,
        paddingLeft: pTx(15),
        paddingRight: pTx(50)
    },
    nickName: {
        fontSize: pTx(16),
        color: "#333"
    },
    foot: {
        marginTop: pTx(10),
        backgroundColor: "#ffffff"
    },
    footRow: {
        height: pTx(50),
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center"
    },
    sendMessage: {
        marginLeft: pTx(3),
        fontSize: pTx(16),
        color: "rgba(6, 193, 97, 1)",
        textAlign: "center"
    }
})